﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FXCX.aspx.cs" Inherits="SkWeb.RiskDB.FXCX" %>
<%@ Register TagPrefix="fjx" Namespace="com.flajaxian" Assembly="com.flajaxian.FileUploader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>风险数据库</title>
	<link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../easyui/jquery.easyui.min.js" type="text/javascript"></script>
   
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        
       .file-box{ position:relative;width:340px} 
       .txt{ height:22px; border:1px solid #cdcdcd; width:180px;} 
       .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;} 
       .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } 
        
        
    </style>
	<script type="text/javascript">
	    $(function () {
	        var lastIndex;

	        $('#select_fx').combobox({
	            onSelect: function (param) {
	                $("#tt").datagrid("load", { fxjb: $('#select_fx').combobox('getValue') }); 
	            }
	        });

	        $('#tt').datagrid({

	            title: '构建风险数据库',
	            iconCls: 'icon-ok',
	            width: 700,
	            height: 550,
	            rownumbers: true,
	            animate: true,
	            fitColumns: true,
	            rownumbers: true,
	            sortName: 'RANK',
	            sortOrder: "asc",
	            url: 'Handler1.aspx',
	            idField: 'id',
	            columns: [[
                    { field: 'ID', title: '序号', width: 100, hidden: true, sortable: true },
                    { field: 'NAME', title: '井号', width: 120, sortable: true },
                    { field: 'LNG', title: '经度', width: 80 },
                    { field: 'LAT', title: '纬度', width: 80 },
                    { field: 'ADDRESS', title: '位置', width: 100 },
                    { field: 'JB', title: '井别', width: 110 },
                    { field: 'GY', title: '工艺', width: 110 },
                    { field: 'DES', title: '', width: 110, hidden: true },
                    { field: 'RANK', title: '风险级别', width: 110, sortable: true, remoteSort: false,
                        formatter: function (value) {
                            if (value == -1) {
                                var s = '<div style="width:100%;background:#fff;border:1px solid #ccc">' + '待检测' + '</div>';
                                return s;
                            }
                            if (value == 1) {
                                var s = '<div style="width:100%;background:#0ff;border:1px solid #ccc">' +
						    			'<div style="width:100%;background:red">' + value + '级' + '</div>'
                                '</div>';
                                return s;
                            } if (value == 2) {
                                var s = '<div style="width:100%;background:#0ff;border:1px solid #ccc">' +
						    			'<div style="width:100%;background:orange">' + value + '级' + '</div>'
                                '</div>';
                                return s;
                            } if (value == 3) {
                                var s = '<div style="width:100%;background:#0ff;border:1px solid #ccc">' +
						    			'<div style="width:100%;background:yellow">' + value + '级' + '</div>'
                                '</div>';
                                return s;
                            } else {
                                var s = '<div style="width:100%;background:#2EFEF7;border:1px solid #ccc">' + '无风险' + '</div>';
                                return s;
                            }
                        }
                    },
                ]],

	            singleSelect: true, //是否单选
	            pageSize: 10,
	            pagination: true,

	            toolbar: "#dev_deviceInfo_toolbar",
	            onBeforeLoad: function () {
	                $(this).datagrid('rejectChanges');
	            },
	            onLoadSuccess: function (data) {

	                var grid = $(".datagrid-toolbar"); //datagrid   
	                var dlg = $("#dlg-toolbar");
	                dlg.attr("style", "float:left");
	                grid.append(dlg);

	                var rows = $("#tt").datagrid("getRows");
	                if (rows.length > 0) {
	                    var row = rows[0];
	                    var scale = document.getElementById('sel_scale').value;
	                    window.frames["frame"].setCenterAndZoom(row.LNG, row.LAT, scale);
	                   // $("#frame").attr("src", "ImgDisp.aspx?id=" + row.ID + "&scale=" + scale)
	                }
	                $("tt").datagrid("selectRow", 1);

	            },
	            onClickRow: function (rowIndex) {
	                if (lastIndex != rowIndex) {
	                    $('#tt').datagrid('endEdit', lastIndex);
	                    $('#tt').datagrid('beginEdit', rowIndex);

	                    var row = $('#tt').datagrid("getSelected");
	                    var scale = $('#sel_scale').combobox('getValue'); //document.getElementById('sel_scale').value;
	                    var type = $('#sel_mapType').combobox('getValue'); //document.getElementById('sel_mapType').value;
	                    var strJh = row.NAME;
	                   // $("#frame").attr("src", "ImgDisp.aspx?id=" + row.ID + "&scale=" + scale + "&map_type=" + type + "&jh=" + strJh)
	                    window.frames["frame"].setCenterAndZoom(row.LNG, row.LAT, scale);
                        
                        var divinfo = $("#blockinfo");
	                    divinfo.text(""); // 清空数据
	                    divinfo.append(row.DES); // 添加Html内容，不能用Text 或 
	                }
	                lastIndex = rowIndex;
	            }
	        });



	    });

	    function destroyInfo() {
	        var row = $('#tt').datagrid('getSelected');
	        if (row) {
	            $.messager.confirm('Confirm', '确定要删除当前记录吗?', function (r) {
	                if (r) {
	                    $.post('FormAction.aspx?Action=delete&id='+row.ID, { id: row.ID }, function (result) {
	                        if (result.success) {
	                            $('#tt').datagrid('reload');    // reload the user data
	                        } else {
	                            $.messager.show({    // show error message
	                                title: 'Error',
	                                msg: result.errorMsg
	                            });
	                        }
	                    }, 'json');
	                }
	            });
	        }
	    }


	    function editInfo(obj) {
	        var row = obj;
	        if (row) {
	            $('#dlg').dialog('open').dialog('setTitle', '修改井数据');
	            $('#fm').form('load', row);
	           // url = 'FormAction.aspx?action=update&id=' + row.id;
	        }
	    }
        //有更新和添加新数据两种情况
	    function saveInfo() {
	        var url_tmp = "FormAction.aspx?action=add"; 
	        if ($('#dlg').panel('options').title == "修改井数据") {
	            var row = $('#tt').datagrid('getSelected');
	            url_tmp = "FormAction.aspx?action=update&id=" + row.ID;
            }
	
            $('#fm').form('submit', {
	            url: url_tmp,
	            onSubmit: function () {
	                return $(this).form('validate');
	            },
	            success: function (result) {
	                result = eval('(' + result + ')');
	                if (!result.success) {
	                    $.messager.show({
	                        title: 'Error',
	                        msg: result.msg
	                    });
	                } else {
	                    $('#dlg').dialog('close');        // close the dialog
	                    $('#tt').datagrid('reload');    // reload the user data
	                }
	            }
	        });
	    }
	   
	</script>

   
</head>
<body>

<script type="text/javascript">

    function wellInfoAddClick() {
        $("tt").datagrid("selectRow", 1);
        $('#dlg').dialog('open').dialog('setTitle', '添加新记录');
        $('#fm').form('clear');
    }

    function wellInfoEditClick() {
        var row = $('#tt').datagrid('getSelected');
        if (row) {
            editInfo(row);
        } 
    }

    function wellInfoDeleteClick() {
        destroyInfo();
    }

    function wellInfoUpload() {
        $('#Div_upload').dialog('open').dialog('setTitle', '上传Excel文件');
    }

    function wellInfoRefreshClick() {
        $('#tt').datagrid('reload'); 
    }

    function recognitionClick() {
        $.ajax({
            url: "Handler.ashx?op=identification",
            type: "post",
            data: '',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                // Play with returned data in JSON format
                $("#tt").datagrid('reload');
                alert('识别完成！');
            },
            error: function (msg) {
                alert('识别完成！');
                $("#tt").datagrid('reload');
            }
        });
    }

    function serchClick(value, name) {
        $("#tt").datagrid("load",{ jh: value });
    }

//    function fxChanged() { 
//            $("#tt").datagrid("load", { fxjb: $('#select_fx').combobox('getValue') });
//      
//    }
//    


</script>



<div id="dev_deviceInfo_toolbar" class="datagrid-toolbar">
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
            <tr>
                <td style="width: 700px;">
                    <%--正常的设备列表--%>
                    <div id="normal">
                        <div style="float: left; padding: 0px; height: auto">
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
                                onclick="wellInfoAddClick();">增加</a> 
                             <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"
                                    onclick="wellInfoEditClick();">修改</a>
                              <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"
                                        onclick="wellInfoDeleteClick();">删除</a>
                        </div>
                        <%--分割线--%>
                        <div id="separator" style="float: left;" class="datagrid-btn-separator"></div>
                        <div style="float: left; padding: 0px; height: auto">
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-up',plain:true"
                                onclick="wellInfoUpload();">上传Excel</a> 
                            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"
                                    onclick="wellInfoRefreshClick();">刷新</a>
                             <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-eye',plain:true"
                                    onclick="recognitionClick();">风险识别</a>
                        </div>
                        <div id="Div2" style="float: left;" class="datagrid-btn-separator">
                        </div>
                        <%--下拉搜索框--%>
                         <div id="Div3" style="display: inline-block; padding-top: 3px; width: 100;">
                        级别:
                        <select id='select_fx' onchange="fxChanged()" class="easyui-combobox" style="width:80px;" data-options="panelHeight:'auto'">
                        <option  selected="selected"></option>
                        <option value="1">一级风险</option>
                        <option value="2">二级风险</option>
                        <option value="3">三级风险</option>
                        <option value="0">无风险</option>
                        <option value="-1">待检测</option>
                        </select>
                        </div>

                    </div>
                    
                </td>
                <td style="text-align: right;">
                <div id="searchboxWrapper" style="display: inline-block; padding-top: 3px; text-align: left;
                            width: 160px;">
                            <input id="searchbox" class="easyui-searchbox" searcher="serchClick"  prompt="请输入查询内容" style="width: 150px; margin-top: 10px; padding-top: 10px;"/>
                            <div id="Div1" style="width: 100px">
                            </div>
                        </div>
                 
                </td>
            </tr>
        </table>
    </div>













   <div id="mm" >
   </div>
    <div style=" float:left">
    <table id="tt" >
	
	</table>
    </div>

   

     <div style=" float:left; margin:0px 10px; width:400px; height:350px">
     
   <%-- <div class="file-box"> 
    <form action="" method="post" enctype="multipart/form-data"> 
    <input type='text' name='textfield' id='textfield' class='txt' /> 
    <input type='button' class='btn' value='浏览...' /> 
    <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> 
    <input type="submit" name="submit" class="btn" value="上传" /> 
    </form> 
    </div> 
    <br />--%>

     <div id="Div_upload" class="easyui-dialog" style="width:350px;height:140px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
    <form runat="server" style="vertical-align:middle">
    <fjx:FileUploader ID="FileUploader1" runat="server" AllowedFileTypes="Excel Documents:*.xls" >
    <Adapters>
        <fjx:FileSaverAdapter Runat="server" FolderName="../FileUpLoad" />
    </Adapters>
    </fjx:FileUploader>
    </form>
    </div>
   
   <div  style="border:solid 1px #95B8E7; height:30px; margin-bottom:5px; line-height:20px; font-size:13px; vertical-align:middle">

     缩放级别：
     <select id='sel_scale' class="easyui-combobox" style="width:50px;"  data-options="panelHeight:'auto'">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12" selected="selected">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
     </select>
     地图类型：
     <select id='sel_mapType' class="easyui-combobox" style="width:100px;" data-options="panelHeight:'auto'">
        <option value="roadmap" selected="selected">地图</option>
        <option value="satellite">卫星</option>
        <option value="terrain">地形</option>
        <option value="hybrid ">合成</option>
     </select>
     </div>

     <iframe id="frame" name="frame"  src="RiskBlockMap.aspx?browse=1" scrolling="no" width="100%" height="100%" >
     </iframe>

     <div id="blockinfo" class="easyui-panel" title="风险区块信息" style="width:400px;height:160px;padding:10px;">
    </div>


    </div>
    <br />
    <div id="">
    
    </div>

     <div id="dlg" class="easyui-dialog" style="width:400px;height:340px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">井信息</div>
        <form id="fm" method="post"   novalidate>
            <div class="fitem">
                <label>井名:</label>
                <input name="name" class="easyui-validatebox" required="true"/>
            </div>
            <div class="fitem">
                <label>经度:</label>
                <input name="lng" class="easyui-validatebox easyui-numberbox" data-options="min:0,precision:4" required="true"/>
            </div>
            <div class="fitem">
                <label>纬度:</label>
                <input name="lat" class="easyui-validatebox easyui-numberbox" data-options="min:0,precision:4" required="true"/>
            </div>
            <div class="fitem">
                <label>井别:</label>
                <select name="jb" style=" width:55%">
                  <option value ="水平井">水平井</option>
                  <option value ="气井">气井</option>
                  <option value="超深井">超深井</option>
                  <option value="探井">探井</option>
                  <option value ="大斜度井">大斜度井</option>
                  <option value ="评价井">评价井</option>
                  <option value="深井">深井</option>
                  <option value="常规油、水井">常规油、水井</option>
                </select>
            </div>

             <div class="fitem">
                <label>工艺:</label>
                <select name="gy"  style=" width:55%">
                  <option value ="水力喷射">水力喷射</option>
                  <option value ="管输射孔下泵联作">管输射孔下泵联作</option>
                  <option value="电缆射孔井">电缆射孔井</option>
                
                </select>
            
            </div>
        </form>
    </div>
   <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveInfo()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>


</body>
</html>
